import { Image, Text, View } from '@tarojs/components';
import { Ellipsis } from '@nutui/nutui-react-taro';
import React from 'react';
import Skeleton from 'react-loading-skeleton';
import Taro from '@tarojs/taro';
import './LittleMovieCard.scss';
import { comingMovieProps, hotMovieProps, mostExpectedMovieProps } from '..';


type Props = {
    comingSoon?: Boolean;
    mostExpected?: Boolean;
    props: {
        img?: string;
        nm?: string;
        sc?: number;
        star?: string;
        showInfo?: string;
        id?: number;
        comingTitle?: string;
    } | hotMovieProps | comingMovieProps | mostExpectedMovieProps;
    bone?: boolean;
};

const LittleMovieCard = ({ props, bone = false, comingSoon = false, mostExpected = false }: Props) => {
    const handleClick = () => {
        Taro.navigateTo({
            url: `/pages/detail/detail?id=${props.id}`
        });
    };
    if (bone) {
        return (
            <View className='LittleMovieCardContainer'>
                <Skeleton width={120} height={170} />
                <Skeleton width={100} height={20} />
                <Skeleton width={100} height={20} />
            </View>
        );
    } else {
        return (
            <View onClick={handleClick} className='LittleMovieCardContainer'>
                <Image className='LittleMovieCardContainer-img' src={props.img as string} />
                <Text className='LittleMovieCardContainer-name' >{props.nm}</Text>
                {(!comingSoon && !mostExpected) && <Text className='LittleMovieCardContainer-score'>评分:{props.sc === 0 ? "暂无" : props.sc}</Text>}
                {(comingSoon || mostExpected) && <Text className='LittleMovieCardContainer-score'>{props.comingTitle}</Text>}
            </View >
        );
    }
};

export default LittleMovieCard;
